<template>
	<view class="content">
		<!--header-->
		<view class="header-wrap">
			<view class="header" v-if="show">
				<view class="header-left">{{titleDate}}</view>
				<view>
					<picker mode="date" fields="month" :value="date" start="2016-03" :end="endDate" @change="bindDateChange">
						<view class="btn">
							选择
						</view>
					</picker>
				</view>
				
			</view>
		</view>
	</view>
</template>
<script>
export default {
	name: 'CommonPicker',
	data() {
		return {
			titleDate:'',
			date: '',
			endDate:'',
			show:true,
		}
	},
	mounted() {
		let t=new Date().getTime();
		let date=this.$u.timeFormat(t, 'yyyy-mm');
		let titleDate=this.$u.timeFormat(t, 'yyyy年mm月');
		//设置当前选中的日期
		this.date=date;
		//设置标题中的年月
		this.titleDate=titleDate;
		//设置结束日期
		this.endDate=date;
	},
	destroyed() {
		this.show=false;
	},
	methods: {
		bindDateChange(event){
			// #ifdef	MP-WEIXIN
			this.date=event.detail.value;
			// #endif		
			// #ifdef	MP-ALIPAY
			this.date=event.detail.value.replace('/','-');
			// #endif
			
			this.$emit('confirm',{date:this.date});
			
			
			let t=new Date(event.detail.value).getTime(); 
			let titleDate=this.$u.timeFormat(t, 'yyyy年mm月');
			this.titleDate=titleDate;
		}
	}
};
</script>

<style lang="scss" scoped>
	.header-wrap{
		position: fixed;
		left:0;
		top:0;
		width:100%;
		z-index: 9999;
	}
	.header{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding:20rpx 30rpx;
		background-color:#fff;
		font-size: 46rpx;
		line-height: 1;
	}
	.header-left{
		font-weight: 500;
	}
	.btn{
		width:130rpx;
		height:54rpx;
		text-align: center;
		line-height: 54rpx;
		font-size: 28rpx;
		background-color:#333;
		border-radius: 27rpx;
		color:#fff;
	}
</style>
